<!-- 人力分析 -->
<template>
  <div class="humanAnalysis">
    <van-nav-bar title="人力分析" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div id="human-chart1" class="charts"></div>
    <div class="charts saraly-container">
      <div class="title">工资进度</div>
      <div class="charts-saraly">
        <van-circle
          size="120px"
          v-model:current-rate="currentRate"
          :rate="rate"
          :color="gradientColor"
          :text="'平均工资\n' + avg + '万元'"
        />
        <van-circle
          size="120px"
          v-model:current-rate="currentRate"
          :rate="rate"
          :color="gradientColor"
          :text="'发放工资\n' + sum + '万元'"
        />
      </div>
    </div>
    <div id="human-chart2" class="charts"></div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import * as echarts from "echarts"; //引入图表库
export default {
  name: "humanAnalysis",
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const data = reactive({
      option1: {
        data: [],
      },
      option2: {
        types: [],
        values: [],
      },
      gradientColor: {
        "0%": "#3fecff",
        "100%": "#6149f6",
      },
      currentRate: 0,
      rate: 70,
      sum: "",
      avg: "",
    });
    onMounted(() => {
      dataInit();
    });
    const refData = toRefs(data);
    //返回按钮
    const onClickLeft = () => {
      router.push({ path: "/analysis" });
    };
    const echartInit = () => {
      //员工数量统计
      var myChart1 = echarts.init(document.getElementById("human-chart1"));
      //工资分布
      var myChart2 = echarts.init(document.getElementById("human-chart2"));
      let option1 = {
        title: {
          text: "员工学历分布",
          left: "center",
          top: "3%",
          textStyle: {
            // color: "#485187",
            fontSize: "14",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "员工学历数量统计",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data.option1.data,
          },
        ],
      };
      let option2 = {
        title: {
          text: "部门平均工资",
          left: "center",
          top: "3%",
          textStyle: {
            // color: "#485187",
            fontSize: "14",
          },
        },
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "category",
          data: data.option2.types,
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: 45, //60度角倾斜显示
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.option2.values,
            type: "bar",
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);
      myChart2.setOption(option2);
    };
    //获取数据
    const dataInit = () => {
      let proms = [
        proxy.$api.getHrEducation(),
        proxy.$api.getHrSalary(),
        proxy.$api.getHrDeptSalary(),
      ];
      Promise.all(proms)
        .then((arr) => {
          data.option1.data = arr[0].obj;
          data.option2.types = arr[2].obj.types;
          data.option2.values = arr[2].obj.values;
          echartInit();
          data.sum = arr[1].obj.sum;
          data.avg = arr[1].obj.avg;
        })
        .catch((e) => {
          proxy.$Toast.fail("请求错误" + e);
        });
    };
    return {
      ...refData,
      onClickLeft,
      echartInit,
      dataInit,
    };
  },
};
</script>
<style scoped lang="scss">
.humanAnalysis {
  background-color: #f5f4f9;
}
.saraly-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title {
  margin-bottom: 20px;
  font-weight: 700;
}
.charts-saraly {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
